<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        div{
        width: 200px;
        height: 200px;
    }
        #d1{
             border-style:solid groove;
             border-color: brown;
             border-width: 2px;
        }
        #d2{
            border-style: solid double;
            border-color: blue;
            border-width: 2px;
        }
        #d3{
            border-style: solid double ridge;
            border-color: rgb(21, 148, 59);
            border-width: 2px;
        }
           #d4{
            border-style: solid double ridge groove;
            border-color: rgb(168, 36, 135);
            border-width: 2px;
        }
    </style>
</head>
<body>
    <!-- 设置div 四个边为3D突出边框 2px  color -->
        <!-- 设置div 上下为实线边框 左右为双实线 2px color-->
        <!-- 设置div 上为实线边框 左右为双实线 下位点线边框 2px color-->
        <!-- 设置div 上为实线边框 右为双实线 下为点线边框 左为3D沟槽 2px color-->
    <div id="d1">div盒子1</div>
    <hr>
       <div id="d2">div盒子2</div>
       <hr>
          <div id="d3">div盒子3</div>
          <hr>
             <div id="d4">div盒子4</div>
             <hr>
</body>
</html>